<!-- author: xuett -->
<!-- date: 2025-07-08 09:11:13 -->
<!-- description: 饼图2 -->
<template>
  <div class="chart-box">
    <v-chart ref="chart2" :option="chartOption" autoresize @mouseover="chart2Mouseover" @mouseout="chart2Mouseout" />
  </div>
</template>

<script setup>
const state = reactive({
  card2Data: [
    {
      name: "吃",
      value: 249
    },
    {
      name: "住",
      value: 169
    },
    {
      name: "行",
      value: 149
    },
    {
      name: "游",
      value: 83
    },
    {
      name: "购",
      value: 141
    },
    {
      name: "娱",
      value: 209
    }
  ],
  chartOption: {},
  chart2Select: {
    isSet: false,
    currentIndex: 0
  }
});
const { chartOption } = toRefs(state);

onMounted(() => {
  initChart();
});

//服务商分类
const chart2 = ref(null);
const initChart = () => {
  let total = 0;
  state.card2Data.forEach((item) => {
    total += item.value;
  });
  state.chartOption = {
    title: {
      text: "服务商(家)",
      subtext: total,
      padding: 0,
      itemGap: 10,
      textAlign: "center",
      textStyle: {
        width: 80,
        color: "#fff",
        fontWeight: "normal",
        align: "center",
        fontSize: 16
      },
      subtextStyle: {
        width: 70,
        fontSize: 24,
        fontWeight: "bold",
        color: "#fff",
        align: "right"
        // fontStyle: "italic"
      },
      x: "25%",
      y: "50%"
    },
    color: ["#549BF1", "#A49284", "#5A70BC", "#0DAEE3", "#67D470", "#B4C9EF"],
    grid: {
      bottom: "5%",
      left: "5%",
      right: "5%"
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/> {c}家  ({d}%)",
      textStyle: {
        color: "#fff",
        fontSize: 12
      },
      backgroundColor: "#255DA9"
    },
    legend: {
      width: 240,
      top: 15,
      right: 10,
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 20,
      icon: "roundRect",
      formatter: (name) => {
        let target = state.card2Data.find((item) => item.name == name);
        var arr = ["{a|" + name + "\n}", "{b|" + ((target.value / total) * 100).toFixed(2) + "%}"];
        return arr.join(" ");
      },
      textStyle: {
        // 添加
        rich: {
          a: {
            padding: [25, 0, 0, 0],
            color: "#fff",
            fontSize: 14,
            fontWeight: "normal",
            width: 120
          },
          b: {
            padding: [10, 0, 0, 0],
            fontSize: 16,
            width: 120,
            color: "#fff"
          }
        }
      },
      data: state.card2Data.map((item) => item.name)
    },
    series: [
      // 主要展示层的
      {
        radius: ["65%", "75%"],
        center: ["25%", "50%"],
        type: "pie",
        itemStyle: {
          borderWidth: 2,
          borderColor: "#132647"
        },
        label: {
          show: false
        },
        selectedMode: "single",
        selectedOffset: 5,
        data: state.card2Data
      },
      // 边框的设置
      {
        radius: ["50%", "57%"],
        center: ["25%", "50%"],
        type: "pie",
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        emphasis: {
          scale: false
        }, //鼠标移入变大
        animation: false,
        tooltip: {
          show: false
        },
        data: [
          {
            value: 1,
            itemStyle: {
              color: "rgba(100, 139, 166, 0.51)"
            }
          }
        ]
      },
      //中心
      {
        radius: ["0%", "50%"],
        center: ["25%", "50%"],
        type: "pie",
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        emphasis: {
          scale: false
        }, //鼠标移入变大
        animation: false,
        tooltip: {
          show: false
        },
        data: [
          {
            value: 1,
            itemStyle: {
              color: "#203d60"
            }
          }
        ]
      },
      {
        name: "外边框",
        type: "pie",
        clockwise: false, //顺时加载
        emphasis: {
          scale: false
        }, //鼠标移入变大
        center: ["25%", "50%"],
        radius: ["85%", "85%"],
        label: {
          show: false
        },
        tooltip: {
          show: false
        },
        data: [
          {
            value: 9,
            name: "",
            itemStyle: {
              borderWidth: 2,
              borderColor: "rgba(51, 114, 210, 0.26)"
            }
          }
        ]
      }
    ]
  };
  if (chart2Timer) {
    clearInterval(chart2Timer);
    chart2Timer = null;
  }
  chart2Timer = setInterval(chart2Hover, 2000);
};
var chart2Timer = null;
const chart2Mouseover = (param) => {
  state.chart2Select.isSet = false;
  if (chart2Timer) {
    clearInterval(chart2Timer);
    chart2Timer = null;
  }
  // 取消之前高亮的图形
  chart2.value.dispatchAction({
    type: "downplay",
    seriesIndex: 0,
    dataIndex: state.chart2Select.currentIndex
  });
  // 高亮当前图形
  chart2.value.dispatchAction({
    type: "select",
    seriesIndex: 0,
    dataIndex: param.dataIndex
  });
  // 显示 tooltip
  chart2.value.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: param.dataIndex
  });
  state.chart2Select.currentIndex = param.dataIndex;
};

// 3、自动高亮展示
const chart2Hover = function () {
  if (!chart2.value) {
    return;
  }
  var dataLen = state.chartOption.series[0].data.length;
  // 取消之前高亮的图形
  chart2.value.dispatchAction({
    type: "downplay",
    seriesIndex: 0,
    dataIndex: state.chart2Select.currentIndex
  });
  state.chart2Select.currentIndex = (state.chart2Select.currentIndex + 1) % dataLen;
  // 高亮当前图形
  chart2.value.dispatchAction({
    type: "select",
    seriesIndex: 0,
    dataIndex: state.chart2Select.currentIndex
  });
  // 显示 tooltip
  chart2.value.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: state.chart2Select.currentIndex
  });
};
// 4、鼠标移出之后，恢复自动高亮
const chart2Mouseout = () => {
  if (!state.chart2Select.isSet) {
    if (chart2Timer) {
      clearInterval(chart2Timer);
      chart2Timer = null;
    }
    chart2Timer = setInterval(chart2Hover, 2000);
    state.chart2Select.isSet = true;
  }
};
</script>

<style scoped lang="scss">
.chart-box {
  width: 100%;
  height: 100%;
  padding: 15px;
  background-color: #000;
}
</style>
